<template>
    <div class="main">
        <el-container>
            <el-header style="padding: 0; height: 85px">
                <div class="container-fluid" style="box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)">
                    <div class="container">
                        <el-row class="nav" align="middle">
                            <!-- Logo -->
                            <el-col :span="4" class="logo">
                                <div>
                                    <router-link to="/front/index" tag="div">
                                        <img src="@/assets/logo1.png" alt="" style="width: 100px; height: 85px;">
                                    </router-link>
                                </div>
                            </el-col>
                            <!-- 导航菜单 -->
                            <el-col :span="20" class="nav-and-control">
                                <div class="nav">
                                    <el-menu
                                            :default-active="$route.path"
                                            class="el-menu-demo"
                                            mode="horizontal"
                                            router
                                            @select="handleSelect"
                                    >
                                        <el-menu-item index="/front/index">首页</el-menu-item>
                                        <el-menu-item index="/front/news">招聘动态</el-menu-item>
                                        <el-menu-item index="/front/about">关于我们</el-menu-item>
                                        <el-menu-item index="/login">登录</el-menu-item>
                                        <el-menu-item index="/register">去注册</el-menu-item>
                                    </el-menu>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-header>
            <div class="container">
                <el-main>
                    <router-view />
                </el-main>
            </div>
            <div class="container-fluid">
                <el-footer class="footer">
                    <p>企业招聘在线考试系统</p>
                    <p>期待你的加入</p>
                </el-footer>
            </div>
        </el-container>
    </div>
</template>

<script>
    export default {
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    };
</script>

<style scoped>
    .main {
        position: relative;
        min-height: 100%;
        background-image: url('~@/assets/login.jpg'); /* 替换为您的背景图路径 */
        background-size: cover; /* 使背景图覆盖整个容器 */
        background-position: center; /* 背景图居中显示 */
        background-repeat: no-repeat; /* 不重复背景图 */
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo img {
        width: auto; /* 保持图片宽度自动，以保持图片比例 */
        height: 100%; /* 设置图片高度为100%，与导航栏高度一致 */
        object-fit: contain; /* 确保图片内容完整显示在指定区域内 */
        margin: 0; /* 移除外边距 */
        padding: 0; /* 移除内边距 */
        display: block; /* 确保图片作为块级元素显示，填满容器 */
    }

    .el-header {
        height: 85px; /* 导航栏的高度应与Logo图片的高度一致 */
    }

    .nav-and-control {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .control {
        display: flex;
        align-items: center;
    }

    .container {
        width: 1200px;
        margin: 0 auto;
    }

    .container-fluid {
        width: 100%;
    }

    .el-menu-item.is-active {
        background-color: #409eff !important;
        color: #fff !important;
        font-weight: bold !important;
    }

    .el-menu-item {
        transition: background-color 0.3s ease-in-out; /* 过渡效果持续0.3秒，使用ease-in-out时间函数 */
    }

    .el-menu-item.is-active {
        background-color: #409eff; /* 蓝色背景 */
        color: #fff; /* 白色字体 */
        font-weight: bold; /* 字体加粗 */
    }

    .el-menu-item:hover {
        background-color: #409eff; /* 蓝色背景 */
        color: #fff; /* 白色字体 */
        font-weight: bold; /* 字体加粗 */
    }

    .el-menu.el-menu--horizontal {
        border-bottom: none;
    }

    .el-menu,
    .el-header {
        background: #fff;
    }

    .el-footer {
        padding: 10px 0;
        height: auto !important;
    }

    .el-main {
        padding: 20px;
        box-shadow: 0 0 3px #ccc;
        margin: 30px 0 110px;
    }

    .main {
        position: relative;
        min-height: 100%;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .control {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logo img {
        width: 100px;
        cursor: pointer;
    }

    .footer {
        text-align: center;
        color: #fff;
        background: #409eff;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .footer p {
        line-height: 30px;
        font-size: 16px;
    }

    /* Custom styles for the navigation bar */
    .el-menu-demo:not(.el-menu--popup) {
        border-radius: 0;
    }

    .el-menu-demo .el-menu-item {
        font-size: 21px; /* Increase font size */
        color: #333; /* Change text color */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and text color */
    }

    .el-menu-demo .el-menu-item.is-active {
        background-color: #409eff; /* Add blue background for active item */
        color: #fff; /* Change text color for active item */
        font-weight: bold; /* Make the text bold */
    }

    .el-menu-demo .el-menu-item:hover {
        background-color: #409eff; /* Add blue background for hover */
        color: #fff; /* Change text color for hover */
        font-weight: bold; /* Make the text bold */
    }
</style>